<template>
  <nuxt-layout name="navigation">
    <div class="container user">
      <Card class="user-head" :is-header="false" margin="10px 0 0" padding="0px">
        <el-row>
          <el-col :span="24">
            <Image :style="bgStyle" :src="userBg" fit="cover"/>
          </el-col>
          <el-col :span="24">
            <div class="user-me">
              <div class="user-avatar">
                <Avatar v-if="!isMe()" round :src="user?.avatar" :size="100" :font-size="40">
                  {{ (user?.nickName || user?.userName)?.charAt(0) }}
                </Avatar>
                <UserAvatar v-else/>
              </div>
              <div class="mg-t-10 fs-18">{{ user?.nickName || user?.userName }}</div>
              <div class="mg-t-10 mg-b-10 fs-14 f-gray-color">注册时间：{{ user?.createTime }}</div>
            </div>
          </el-col>
        </el-row>
      </Card>
      <Card :is-header="false" margin="10px 0 0">
        <client-only>
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane :label="isMe() ? '我的评论' : 'TA的评论'" name="comments">
              <Comments v-if="user?.userName != null" :username="user?.userName" is-scroll-into-view/>
            </el-tab-pane>
            <el-tab-pane v-if="isMe()" label="我的收藏" name="collect">
              <Site is-collect is-page :lazy="false"/>
            </el-tab-pane>
            <el-tab-pane v-if="isMe()" label="基本信息" name="info">
              <UserInfo @updateAfter="updateAfter" @uploadAfter="uploadAfter"/>
            </el-tab-pane>
            <el-tab-pane v-if="isMe()" label="安全设置" name="security">
              <UserSecurity/>
            </el-tab-pane>
          </el-tabs>
        </client-only>
      </Card>
    </div>
  </nuxt-layout>
</template>

<script setup lang="ts">
import {User} from "~/entity/user";
import {Response} from "~/entity/response";
import userBg from "@/assets/image/user_bg.svg";

const {setting} = useStoreToRefs(useStores.setting());
const {loginStatus, userInfo} = useStoreToRefs(useStores.user());
const bgStyle = {
  width: "100%",
  height: "300px"
};
const {userApi} = useApi();
const route = useRoute();
const activeName = ref("comments");
const user = ref<User>();
const userId = ref();

useHead({
  title: '用户中心' + setting.value?.seoSeparate + userInfo.value.userName + setting.value?.seoSeparate + setting.value?.name,
  meta: [
    {name: 'description', content: setting.value?.seoDescription},
    {name: 'keywords', content: setting.value?.seoKeywords.join(",") + "," + userInfo.value.userName}
  ]
});

onMounted(() => {
  if (route.params.id) {
    userId.value = route.params.id;
    getUser();
  }
});

watch(
    () => loginStatus.value,
    () => {
      if (!loginStatus.value) {
        activeName.value = "comments";
      }
    }
);

const updateAfter = () => {
  getUser();
};
const uploadAfter = () => {
  getUser();
}
const getUser = () => {
  userApi.getUserById(userId.value).then((res: any) => {
    const {data}: Response = res;
    user.value = data;
  });
}
const isMe = () => {
  return loginStatus.value && String(userInfo.value.userId) === String(userId.value);
}
</script>

<style scoped lang="scss">
.user {
  .user-head {
    .user-me {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .user-avatar {
        padding: 7px;
        position: relative;
        margin-top: -60px;
        border-radius: 100%;
        background-color: #FFFFFF;
      }
    }
  }
}
</style>